<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>工作室</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			body{
				position: relative;
			}
			.van-grid-item__content::after {
				border: none;
			}
			.van-grid-item__text {
				color: var(--van-grid-item-text-color);
				font-size: 14px;
				line-height: 1.5;
				word-break: break-all;
			}
			.van-grid-item__icon {
				font-size: 50px;
			}
			.my-swipe {
				padding: 0.21rem 0;
			}
			.my-swipe .van-swipe-item {
				width: 2.92rem!important;
				margin-right: 0.42rem;
				font-size: 0.29rem;
				color: #515151;
			}
			.my-swipe .van-swipe-item span {
				color: #999999;
				font-size: 0.25rem;
			}
			.van-card {
				background: #ffffff;
				border-bottom: 1px solid rgba(187, 187, 187, 0.3);
				margin: 0 0.2rem;
				padding-left: 0;
				padding-right: 0;
			}
			.van-card:last-of-type {
				border-bottom: none;
			}
			.van-card__thumb {
				width: 60px;
				height: 60px;
				border-radius: 8px;
				overflow: hidden;
				margin-right: 0.3rem;
			}
			.van-card__content {
				min-height: 0;
			}
			.van-card__title {
				font-size: 16px;
				line-height: 30px;
				font-weight: normal;
			}
			.van-card__desc {
				color: #a1a1a1;
				font-size: 14px;
				line-height: 25px;
			}
			.iden-bottom {
				height: 0.83rem;
				display: flex;
				position: fixed;
				bottom: 0;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				color: #ffffff;
				align-items: center;
    		justify-content: space-between;
			}	
			.patient_list{
				padding: 0 0.21rem;
				width: calc(94% - 0.42rem);
			}
			.item-list{
				display: flex;
				justify-content: space-between;
    		align-items: center;
				height: 0.85rem;
			}
			.flex_item{
				display: flex;
				align-items: center;
			}
			.patient_card{
				padding: 0.21rem;
				width: 2.5rem;
				height: 1.35rem;
				border-radius: 0.08rem;
			}
			.border{
				border: 1px solid rgba(187, 187, 187, 0.3);
			}
			.up{
				background-size: 2.92rem 1.77rem;
				background-repeat: no-repeat;
				background-image: url('./img/studio/up.png');
			}
			.down{
				background-size: 2.92rem 1.77rem;
				background-repeat: no-repeat;
				background-image: url('./img/studio/down.png');
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="d_container">
				<div class="doctor_box ds_info_header" @click="linkToDoctor(detail.dataId)">
					<!-- <div class="ds_info_change flex" @click.stop='linkeToChoiceOrg'>
						<img src="img/change.png" alt="">
						<p>切换团队</p>
					</div> -->
					<div class="ds_info_avater">
						<img v-if="!detail.doctorsImg" src="img/logo.png" />
						<img v-if="detail.doctorsImg" :src="detail.doctorsImg" />
					</div>
					<div class="ds_info_detail">
						<p class="ds_info_detail_name">{{detail.doctorsName||匿名}}</p>
						<p class="ds_info_detail_level" v-if="status == 1">{{detail.doctorsLevel}}</p>
						<p class="ds_info_detail_level" v-if="status != 1">点此完善个人信息</p>
					</div>
					<div class="ds_info_code" @click.stop="linkToCode(detail.dataId)" v-if="status == 1">
						<img src="img/studio/code.png" style="width: 50%" />
						<!-- <p>我的二维码</p> -->
					</div>
					<div class="ds_info_code" v-if="status == 2">
						<img src="img/waitAudit.png" style="width: 1.46rem;height: 1.46rem;" />
					</div>
					<div class="ds_info_code" v-if="status == 3">
						<img src="img/unAudit.png" style="width: 1.46rem;height: 1.46rem;" />
					</div>
				</div>

				<div class="doctor_center_title">
					<img src="img/title-left.png" />
					<span>职业成就</span>
					<img src="img/title-right.png" />
				</div>
				<div class="doctor_box ds_achieve" @click="handleClick">
					<ul>
						<li v-for="item in achieveList">
							<div class="">
								<img :src="item.icon" />
								<span class="ds_achieve_name">{{item.name}}</span>
								<span>{{item.num || '无'}}</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="doctor_box">
					<van-grid :column-num="3" :border="false">
						<van-grid-item
							v-for="item in studioTabList"
							:key="item"
							:url="item.link"
						>
							<div>
								<img
									:src="item.icon"
									style="margin-left: 11px; width: 50px; height: 50px"
								/>
								<p style="text-align: center; margin-top: 6px">{{item.name}}</p>
								<p
									style="
										text-align: center;
										font-size: 12px;
										opacity: 30%;
										margin-top: 2px;
									"
								>
									{{item.desc}}
								</p>
							</div>
						</van-grid-item>
					</van-grid>
				</div>

				<template v-if="status == 1">
					<!-- <div class="doctor_center_title">
						<img src="img/title-left.png" />
						<span>我的团队</span>
						<img src="img/title-right.png" />
					</div> -->
					<div class="doctor_box patient_list">
						<div class="item-list" @click="toPatient('today')">
							<div class="flex_item">
								<img src="./img/studio/today.png" style="width: 0.42rem;height: 0.42rem;margin-right: 0.21rem;" />
								<span>最新测量</span>
							</div>
							<div class="flex_item">
								<span style="font-size: 0.29rem;color: #999;">{{patientList.length}}人</span>
								<img src="./img/studio/arrow.png" style="width: 0.35rem;height: 0.35rem;" />
							</div>
						</div>
						<div style="border-top: 1px solid rgba(187, 187, 187, 0.2);" v-if="patientList.length>0">
							<van-swipe
							class="my-swipe"
							v-if="noteam==1"
							:loop="false"
							width="180"
							:show-indicators="false"
						>
							<van-swipe-item v-for="item in patientList" :key="item">
								<div :class="item.status == 1?'patient_card border':item.status==2?'patient_card down':'patient_card up'" @click="linkToPatient(item.patientId)">
									<div style="margin-bottom: 0.08rem;">{{item.name}}</div>
									<span style="margin-right:0.21rem;">{{item.sex}}</span><span style="margin-right: 0.21rem;">{{item.age?item.age+'岁':''}}</span><span style="font-size: 0.25rem;color: #666666;">{{item.checkType}}</span>
									<div style="margin-top: 0.08rem;"><span style="font-size: 0.33rem;color: #333333;margin-right: 0.54rem;">{{item.bloodSugar}}</span><span>{{item.checkTime}}</span></div>
								</div>
							</van-swipe-item>
						</van-swipe>
						</div>
					</div>
					<div class="doctor_box patient_list">
						<div class="item-list" style="height: 0.98rem;" @click="toPatient('star')">
							<div class="flex_item">
								<img src="./img/studio/star.png" style="width: 0.42rem;height: 0.42rem;margin-right: 0.21rem;" />
								<span>重点关注</span>
							</div>
							<div class="flex_item">
								<span style="font-size: 0.29rem;color: #999;">{{patient.importantNum}}</span>
								<img src="./img/studio/arrow.png" style="width: 0.35rem;height: 0.35rem;" />
							</div>
						</div>
						<div class="item-list" style="height: 0.98rem;border-top: 1px solid rgba(187, 187, 187, 0.2);" @click="toPatient('uncheck')">
							<div class="flex_item">
								<img src="./img/studio/uncheck.png" style="width: 0.42rem;height: 0.42rem;margin-right: 0.21rem;" />
								<span>未测量患者</span>
							</div>
							<div class="flex_item">
								<span style="font-size: 0.29rem;color: #999;">{{patient.unMeasureNum}}</span>
								<img src="./img/studio/arrow.png" style="width: 0.35rem;height: 0.35rem;" />
							</div>
						</div>
						<div class="item-list" style="height: 0.98rem;border-top: 1px solid rgba(187, 187, 187, 0.2);" @click="toPatient('scanQr')">
							<div class="flex_item">
								<img src="./img/studio/scanQr.png" style="width: 0.42rem;height: 0.42rem;margin-right: 0.21rem;" />
								<span>扫码患者</span>
							</div>
							<div class="flex_item">
								<span style="font-size: 0.29rem;color: #999;">{{patient.scanQrcodeNum}}</span>
								<img src="./img/studio/arrow.png" style="width: 0.35rem;height: 0.35rem;" />
							</div>
						</div>
					</div>
				</template>
				<template v-else>
					<div class="doctor_center_title">
						<img src="img/title-left.png" />
						<span>认证执医</span>
						<img src="img/title-right.png" />
					</div>
					<img class="doctor_box" src="./img/identify.png" @click="linkToDoctor(detail.dataId)" />
				</template>
				<div v-if="status == 0" class="iden-bottom">
					<span style="margin-left:0.17rem">开通在线执医，您将获得更多的收益</span>
					<van-button class="op-btn" style="margin-right:0.17rem;font-size: 0.25rem;" @click="linkToDoctor(detail.dataId)">马上开通</vant-button>
				</div>
				<div v-if="status == 3" class="iden-bottom">
					<span style="margin-left:0.17rem">不通过原因：{{detail.remark}}</span>
					<van-button class="op-btn" style="margin-right:0.17rem;font-size: 0.25rem;" @click="linkToDoctor(detail.dataId)">不通过</vant-button>
				</div>
				<!-- <div class="doctor_center_title">
					<img src="img/title-left.png"/>
					<span>我的机构</span>
					<img src="img/title-right.png"/>
				</div>
				<div class="doctor_box" style="margin-bottom: 0.3rem;">
					<van-card
						v-for='item in org'
						:key='item'
						:desc="item.location"
						:title="item.orgName"
						:thumb="item.orgIcon"
						@click='linkToOrg(item.dataId)'
					/>
				</div> -->
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					url: {
						getDoctorInfo: '/201/02/2010201',
						getTeam: '/201/03/2010301',
						getOrg: '/201/02/2010205',
						getAchieve: '/201/02/2010206',
						getDetail: '/doctor/index/info',
					},
					doctorId: '',
					detail: {},
					patient:{},
					achieveList: [
						{
							icon: 'img/studio/1-5.png',
							name: '患者总数',
							num: '',
						},
						{
							icon: 'img/studio/1-4.png',
							name: '服务患者总数',
							num: '',
						},
						{
							icon: 'img/studio/1-3.png',
							name: '联网血糖仪',
							num: '',
						},
						{
							icon: 'img/studio/1-1.png',
							name: '血糖测量总数',
							num: '',
						},
					],
					studioTabList: [
						{
							icon: 'img/studio/index_service3.png',
							name: '服务',
							desc: '查看患者服务',
							link:
								'./managePatientList.html?style=service&tab=0&id=' +
								localStorage.getItem('did'),
						},
						{
							icon: 'img/studio/index_service1.png',
							name: '排班表',
							desc: '设置出诊时间',
							link: './schedual.html?id=' + localStorage.getItem('did'),
						},
						{
							icon: 'img/studio/index_service2.png',
							name: '门诊',
							desc: '最新患者预约',
							link: './opc.html?id=' + localStorage.getItem('did'),
						},
					],
					doctorTeam: [],
					patientList:[
						// {
						// 	name: '张晓一',
						// 	sex:'女',
						// 	age: '27',
						// 	bloodSugar: '6.3',
						// 	checkType: '晚餐后',
						// 	status: 2,
						// 	checkTime: '19:32'
						// },
						// {
						// 	name: '曾兰芳',
						// 	sex:'女',
						// 	age: '54',
						// 	bloodSugar: '9.3',
						// 	checkType: '午餐后',
						// 	status: 3,
						// 	checkTime: '12:30'
						// },
						// {
						// 	name: '陈家文',
						// 	sex:'男',
						// 	age: '42',
						// 	bloodSugar: '8.8',
						// 	checkType: '空腹',
						// 	status: 3,
						// 	checkTime: '07:38'
						// }
					],
					org: [],
					status: null,
					noteam: 1,
					teamList:[]
				}
			},
			filters:{
				bgImage(item){
					console.log(item)
					return `background-image: url(${item.bgUrl});`
				}
			},
			created() {
				sessionStorage.removeItem('doctorInfo')
				// localStorage.setItem('did', '10011184')
				this.doctorId = localStorage.getItem('did')
				this.init()
			},
			methods: {
				async init() {
					await this.getOrgActions()
					await this.handleGetDoctorInfo()
					// await this.handleGetTeam()
					await this.handleGetOrg()
					await this.handleGetAchieve()
					await this.handleGetPatient()
				},
				handleGetDoctorInfo() {
					postAction(spliceUrl(this.url.getDoctorInfo), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						console.log('handleGetDetail', res)
						if (res.success&&res.result) {
							this.detail = res.result
							this.status = res.result.doctorsIsverify
							sessionStorage.setItem('orgCode',res.result.doctorsHospitalId)
							sessionStorage.setItem('isdoctor',true)
							this.handleGetLevel()
							if(res.result.teamId==null&&this.teamList){
								window.location.href = 'orgChoice.html'
							}
						}
					})
				},
				handleGetLevel() {
					getAction(spliceUrl('/sys/dict/getDictItems/jobTitle')).then(res => {
						res = res.data
						console.log('handleGetLevel', res)
						if (res.success) {
							this.levelList = res.result
							this.levelList.forEach(v => {
								if (this.detail.doctorsLevel == v.value) {
									this.detail.doctorsLevel = v.title
								}
							})
						}
					})
				},
				handleClick() {
					if (this.status !=1)return
					window.location.href = 'baseInfo.html?id=' + this.doctorId
				},
				toPatient(type){
					const tp = type == 'today'? 1:type == 'star'? 2:type == 'uncheck'? 3:4
					window.location.href = 'patientList.html?id=' + this.doctorId + '&type='+tp
				},
				handleGetOrg() {
					getAction(spliceUrl(this.url.getOrg), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						// console.log('handleGetOrg', res)
						if (res.success) {
							this.org = res.result
						}
					})
				},
				handleGetAchieve() {
					getAction(spliceUrl(this.url.getDetail), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						// console.log('getAchieve', res)
						if (res.success && res.result) {
							this.achieveList[0].num = res.result.patientCount
							this.achieveList[1].num = res.result.servingPatientCount
							this.achieveList[2].num = res.result.gluDeviceCount
							this.achieveList[3].num = res.result.sugarCount
						}
					})
				},
				handleGetPatient(){
					this.postAction1(spliceUrl('/doctor/index/patient/statistics'),{doctorId:+this.doctorId}).then(res=>{
						res=res.data
						console.log('handleGetPatient', res)
						if(res.success){
							this.patientList = res.result.measurePatientList||[]
							this.patient = res.result
						}
					})
				},
				postAction1(url, parameter) {
					if(!parameter) {
						parameter = {}
					}
					if (localStorage.getItem('staffid')){
						parameter.staffId=localStorage.getItem('staffid');
					}
					if (localStorage.getItem('staffname')){
						parameter.staffName=localStorage.getItem('staffname');
					}
					return axios({
						url: url,
						method: "post",
						params: parameter,
					});
				},
				
				getOrgActions() {
					getAction(spliceUrl('/100/12/1001212'),{doctorId:this.doctorId}).then(res => {
						res = res.data
						console.log('teamList', res)
						if (res.success) {
							this.teamList = res.result.list
						}
					})
				},
				call() {
					console.log('call')
					window.location.href = 'tel://' + this.detail.orgPhone
				},
				linkToDoctor(id) {
					if(this.status == 1){
						window.location.href = 'doctorInfo.html?id=' + id
					}else if(this.status == 0){
						window.location.href = `editDoctorInfo.html?id=${id}&status=${this.status}`
					}else{
						window.location.href = 'audit.html?id='+id+`${this.status == 3?'&status=3':''}`
					}
					
				},
				linkToOrg(id) {
					window.location.href = 'institutionDetail.html?id=' + id
				},
				linkToTeam(id) {
					window.location.href = 'memberManage.html?id=' + id
				},
				linkToCode(id) {
					window.location.href = 'qrcode.html?tab=0&id=' + id
				},
				linkToPatient(id) {
					window.location.href = '../patient/index.html?userid=' + id
				},
				linkeToChoiceOrg(){
					window.location.href = 'orgChoice.html'
				}
			},
			components: {
				//linkIndex:linkIndex
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
